これからはじめるGulp #12：gulp-imageminプラグインを使ったJPEG,PNG,GIF,SVGの最適化

はじめに

前回のこれからはじめるGulp（11）：ブラウザ間でスクロールやクリック操作を同期できるBrowserSyncでBrowserSyncを試しました。今回から画像最適化に関するプラグインを色々と試してみたいと思います。今回はJPEG,PNG,GIF,SVGを軽量化するためにgulp-imageminプラグインを試してみます。

gulp-imageminプラグインとは

gulp-imageminはJPEG,PNG,GIF,SVGをロスレスで軽量化できるプラグインです。Gruntを使っていた方はgrunt-contrib-imageminが思い浮かぶと思いますがほぼ同等の機能を持ったGulpプラグインです。

gulp-imageminにバンドルされているエンコード・デコードライブラリ

gulp-imageminには以下のエンコード・デコードライブラリがバンドルされています。

ライブラリ	プラグイン	対象形式
gifsicle	imagemin-gifsicle	GIF
jpegtran	imagemin-jpegtran	JPEG
optipng	imagemin-optipng	PNG
pngquant	imagemin-pngquant	PNG
svgo	imagemin-svgo	SVG

gulp-imageminはimageminプラグインをインストールすることで他のライブラリを利用することもできます。プラグイン一覧はこちらです。

gulp-imageminのインストール

gulp-imageminをインストールします。インストール時にバンドルされたライブラリのチェックが行われます。

sudo npm install gulp-imagemin --save-dev
Password:
npm WARN package.json marke.io@1.0.0 No repository field.
npm WARN package.json marke.io@1.0.0 No README data
npm WARN engine imagemin@3.1.0: wanted: {"node":">=0.10.0","npm":">=2.1.5"} (current: {"node":"0.10.32","npm":"1.4.28"})
\
> jpegtran-bin@2.0.2 postinstall /Users/nukos/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-jpegtran/node_modules/jpegtran-bin
> node lib/install.js

  ✔ jpegtran pre-build test passed successfully

> gifsicle@2.0.1 postinstall /Users/nukos/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-gifsicle/node_modules/gifsicle
> node lib/install.js

  ✔ gifsicle pre-build test passed successfully


> optipng-bin@2.0.4 postinstall /Users/nukos/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-optipng/node_modules/optipng-bin
> node lib/install.js

  ✔ optipng pre-build test passed successfully

> pngquant-bin@2.0.3 postinstall /Users/nukos/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-pngquant/node_modules/pngquant-bin
> node lib/install.js

  ✔ pngquant pre-build test passed successfully
 gulp-imagemin@2.0.0 node_modules/gulp-imagemin
├── object-assign@1.0.0
├── pretty-bytes@1.0.2 (get-stdin@1.0.0)
├── chalk@0.5.1 (escape-string-regexp@1.0.2, ansi-styles@1.1.0, supports-color@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0)
├── through2-concurrent@0.3.1 (through2@0.6.3)
└── imagemin@3.1.0 (get-stdin@3.0.2, optional@0.1.2, through2@0.6.3, vinyl@0.4.6, stream-combiner@0.2.1, meow@2.0.0, concat-stream@1.4.7, vinyl-fs@0.3.13, imagemin-svgo@4.0.0, imagemin-jpegtran@4.0.0, imagemin-gifsicle@4.0.0, imagemin-optipng@4.0.0, imagemin-pngquant@4.0.0)

imageminタスクを作る

imagemin.jsというファイルにimageminタスクを作ります。gulp-imageminのオプションはサイトをチェックしてください。

var gulp     = require('gulp');
var imagemin = require('gulp-imagemin');

var paths = {
  srcDir : 'assets/images/_src',
  dstDir : 'assets/images/prd'
}

gulp.task( 'imagemin', function(){
  var srcGlob = paths.srcDir + '/**/*.+(jpg|jpeg|png|gif|svg)';
  var dstGlob = paths.dstDir;
  var imageminOptions = {
    optimizationLevel: 7
  };

  gulp.src( srcGlob )
    .pipe(imagemin( imageminOptions ))
    .pipe(gulp.dest( dstGlob ));
});

imageminタスクを実行する

とりあえずタスクを試すためにpngファイルを用意し$ gulp imageminを実行します。

用意するファイルとディレクトリ構造

assets/images/
└── _src
    └── orig
        └── image.png

実行

$ gulp imagemin
[16:00:46] Using gulpfile ~/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/gulpfile.js
[16:00:46] Starting 'imagemin'...
[16:00:46] Finished 'imagemin' after 6.85 ms
[16:00:48] gulp-imagemin: Minified 1 image (saved 4.99 kB - 26.6%)

gulp-imagemin: Minified 1 image (saved 4.99 kB - 26.6%)１つのファイルが圧縮され26.6%軽くなりました。圧縮されたファイルはprdディレクトリに保存されます。

assets/images/
├── _src
│   └── orig
│       └── hardware.png
└── prd
    └── orig
        └── hardware.png <- 圧縮後
[/bash]


<h2 id="toc-svg">SVGの圧縮</h2>

<p>次にSVGファイルを作りgulp-imageminにかけてみます。ファイルとディレクトリはこんな感じ。</p>


assets/images/
├── _src
│   ├── icon.svg
│   └── orig
│       └── hardware.png
└── prd
    ├── icon.svg
    └── orig
        └── hardware.png

圧縮前のSVG

SVGファイルはSketch 3で作りました。結構必要のないコードが多いです。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="896px" height="896px" viewBox="0 0 896 896" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <!-- Generator: Sketch 3.2 (9961) - http://www.bohemiancoding.com/sketch -->
    <title>icon!</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="iTunesArtwork@2x" sketch:type="MSArtboardGroup" transform="translate(-64.000000, -64.000000)">
            <g id="icon" sketch:type="MSLayerGroup" transform="translate(64.000000, 64.000000)">
                <path d="M448,896 C695.423568,896 896,695.423568 896,448 C896,200.576432 695.423568,0 448,0 C200.576432,0 0,200.576432 0,448 C0,695.423568 200.576432,896 448,896 Z M448,752 C615.894564,752 752,615.894564 752,448 C752,280.105436 615.894564,144 448,144 C280.105436,144 144,280.105436 144,448 C144,615.894564 280.105436,752 448,752 Z" id="Oval-1" fill="#626262" sketch:type="MSShapeGroup"></path>
                <polygon id="Polygon-1" fill="#626262" sketch:type="MSShapeGroup" points="448 144 711.271723 296 711.271723 600 448 752 184.728277 600 184.728277 296 "></polygon>
                <polygon id="Polygon-2" fill="#CECECE" sketch:type="MSShapeGroup" points="448 196.695754 665.635861 322.347877 665.635861 573.652123 448 699.304246 230.364139 573.652123 230.364139 322.347877 "></polygon>
                <polygon id="Polygon-3" fill="#FFFFFF" sketch:type="MSShapeGroup" points="448 250.179093 619.317931 349.089547 619.317931 546.910453 448 645.820907 276.682069 546.910453 276.682069 349.089547 "></polygon>
            </g>
        </g>
    </g>
</svg>

圧縮後のSVG

圧縮すると不要なコードが削除されすっきりしました。

<svg width="896" height="896" viewBox="0 0 896 896" xmlns="http://www.w3.org/2000/svg"><title>icon!</title><desc>Created with Sketch.</desc><g fill="none" fill-rule="evenodd"><g><g><path d="M448 896c247.424 0 448-200.576 448-448S695.424 0 448 0 0 200.576 0 448s200.576 448 448 448zm0-144c167.895 0 304-136.105 304-304S615.895 144 448 144 144 280.105 144 448s136.105 304 304 304z" fill="#626262"/><path fill="#626262" d="M448 144l263.272 152v304L448 752 184.728 600V296z"/><path fill="#CECECE" d="M448 196.696l217.636 125.652v251.304L448 699.304 230.364 573.652V322.348z"/><path fill="#fff" d="M448 250.18l171.318 98.91v197.82L448 645.82l-171.318-98.91V349.09z"/></g></g></g></svg>

まとめ

手作業では面倒な圧縮処理も効率的に行えますね。ただ、このままだとすべてのファイルを毎回圧縮することになるので非効率です。そこで明日はgulp-changedプラグインを使って更新されたファイルだけを圧縮するように改良してみたいと思います。

この記事はgulp-imageminプラグインを使ったJPEG,PNG,GIF,SVGの最適化の転載です。